<template>
  <div class="app-container">
    <span>快递站点：</span>
    <el-select v-model="listQuery.express_id" placeholder="请选择快递站点">
      <el-option
        v-for="item in expressOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <span style="margin-left: 10px">楼栋：</span>
    <el-select v-model="listQuery.dormitory_id" placeholder="请选择楼栋">
      <el-option
        v-for="item in floorOptions"
        :key="item.id"
        :label="item.room_no"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <span style="margin-left: 10px">支付状态：</span>
    <el-select v-model="listQuery.pay_status" placeholder="支付状态">
      <el-option
        v-for="item in payOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <span style="margin-left: 10px">订单状态：</span>
    <el-select v-model="listQuery.status" placeholder="订单状态">
      <el-option
        v-for="item in statusOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <div class="filter-container">
      <span class="demonstration" @click="getTime">用户名：</span>
      <el-input
        style="width: 200px; margin-right: 10px"
        placeholder="请输入用户名字"
        prefix-icon="el-icon-search"
        v-model="listQuery.name"
      >
      </el-input>
      <span class="demonstration" @click="getTime">用户电话：</span>
      <el-input
        style="width: 200px; margin-right: 10px"
        placeholder="请输入用户电话号"
        prefix-icon="el-icon-search"
        v-model="listQuery.mobile"
      >
      </el-input>
      <span class="demonstration" @click="getTime">时间选择：</span>
      <el-date-picker
        v-model="listQuery.time"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="search"
      >
        搜索
      </el-button>
      <el-button
        v-waves
        :loading="downloadLoading"
        class="filter-item"
        type="primary"
        icon="el-icon-download"
        @click="handleDownload"
      >
        导出<el-tooltip
          class="item"
          effect="dark"
          content="导出当前页数据"
          placement="right-start"
          ><span><i class="el-icon-warning"></i></span>
        </el-tooltip>
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="编号" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.take_no }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日期时间" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.ctime | parseTime("{y}-{m}-{d} {h}:{i}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="快递公司" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.express.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="取件信息" width="300px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.message }}</span>
        </template>
      </el-table-column>
      <el-table-column label="楼栋" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.dormitory.room_no }}</span>
        </template>
      </el-table-column>
      <el-table-column label="宿舍" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.full_address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付金额" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="退款原因"
        width="150px"
        align="center"
        v-if="listQuery.pay_status == 5"
      >
        <template slot-scope="{ row }">
          <span>{{ row.refund_message }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        min-width="150px"
        fixed="right"
      >
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-s-tools"
            @click="setOrderStatus(row.id, 2)"
            v-if="row.pay_status == 2 && row.status == 1"
          >
            设为已取件
          </el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-s-tools"
            @click="setOrderStatus(row.id, 3)"
            v-if="row.pay_status == 2 && row.status == 2"
          >
            设为已完成
          </el-button>
          <el-button
            :disabled="refundKey"
            type="primary"
            size="small"
            icon="el-icon-s-finance"
            @click="refun(row)"
            v-if="row.pay_status == 5"
          >
            退款
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="dataPage.currentPage"
        :page-sizes="[20, 35, 50]"
        :page-size="dataPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(dataPage.count)"
      >
      </el-pagination>
    </div>
    <!-- 退款 -->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      @close="clearForm"
      :close-on-click-moda="false"
      center
    >
      <el-form ref="form" :model="refundOrder" label-width="80px">
        <el-form-item label="姓名">
          <span>{{ refundOrder.name }}</span>
        </el-form-item>
        <el-form-item label="电话">
          <span>{{ refundOrder.mobile }}</span>
        </el-form-item>
        <el-form-item label="支付金额">
          <span>{{ refundOrder.amount }}</span>
        </el-form-item>
        <el-form-item label="退款原因">
          <span>{{ refundOrder.refund_message || "无" }}</span>
        </el-form-item>
        <el-form-item label="退款金额">
          <el-input v-model="refundOrder.money"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureRefun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { apiGetOrderList, apiSetOrderStatus, apiSetRefund } from "@/api/roder";
import { apiGetExpressList } from "@/api/brandname";
import { apiGEtFloorlist } from "@/api/floor";
export default {
  name: "ComplexTable",
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      list: [],
      listLoading: true,
      listQuery: {
        page: 1,
        pageSize: 20,
        status: 1,
        pay_status: 2,
        express_id: "",
        dormitory_id: "",
        name: "",
        mobile: "",
        time: ["", ""],
      },
      refundOrder: {},
      refundKey: false,
      centerDialogVisible: false,
      dataPage: {},
      statusOptions: [
        {
          value: 1,
          label: "待取件",
        },
        {
          value: 2,
          label: "已取件",
        },
        {
          value: 3,
          label: "已完成",
        },
      ],
      payOptions: [
        {
          value: 1,
          label: "待支付",
        },
        {
          value: 2,
          label: "已支付",
        },
        {
          value: 3,
          label: "支付失败",
        },
        {
          value: 4,
          label: "已退款",
        },
        {
          value: 5,
          label: "申请退款",
        },
      ],
      expressOptions: [
        {
          id: "",
          name: "全部",
        },
      ],
      floorOptions: [
        {
          id: "",
          room_no: "全部",
        },
      ],
      showReviewer: false,
      dialogFormVisible: false,
      dialogStatus: "",
      downloadLoading: false,
    };
  },
  created() {
    this.getExpressList();
    this.getFloorlist();
    this.getList();
  },
  methods: {
    getTime() {
      console.log(this.listQuery.time);
    },
    getList() {
      this.listLoading = true;
      apiGetOrderList(this.listQuery)
        .then((response) => {
          this.list = response.data.data;
          this.total = response.data.data;
          this.dataPage = response.data.page;
          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false;
          }, 1000);
        })
        .catch((req) => {
          setTimeout(() => {
            this.listLoading = false;
          }, 1000);
        });
    },
    getExpressList() {
      apiGetExpressList().then((res) => {
        this.expressOptions = this.expressOptions.concat(res.data);
      });
    },
    getFloorlist() {
      apiGEtFloorlist().then((res) => {
        this.floorOptions = this.floorOptions.concat(res.data);
      });
    },
    search() {
      this.getList();
    },
    setOrderStatus(id, status) {
      apiSetOrderStatus({ id, status }).then((res) => {
        this.$message.success("设置成功");
        this.getList();
      });
    },
    handleCurrentChange(page) {
      this.listQuery.page = page;
      this.getList();
    },
    handleSizeChange(pageSize) {
      this.listQuery.pageSize = pageSize;
      this.getList();
    },
    refun(data) {
      this.refundOrder = data;
      this.$set(this.refundOrder, "money", data.amount);
      this.centerDialogVisible = true;
    },
    sureRefun() {
      this.refundKey = true;
      let parmar = {
        id: this.refundOrder.id,
        refund_amount: this.refundOrder.money,
      };
      let money = Number.parseFloat(parmar.refund_amount);
      let amount = Number.parseFloat(this.refundOrder.amount);
      if (money <= 0 || money > amount) {
        this.$message.error("退款金额不能大于支付金额或者小于等于0元");
        return false;
      }
      apiSetRefund(parmar)
        .then((res) => {
          this.$message.success("退款成功");
          this.getList();
        })
        .catch((rej) => {
          this.refundKey = false;
        });
    },
    clearForm() {
      this.refundOrder = {};
    },
    //导出
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then((excel) => {
        console.log(excel);
        const tHeader = [
          "编号",
          "时间",
          "名字",
          "电话",
          "快递站点",
          "取件信息",
          "楼栋",
          "宿舍",
          "支付金额",
        ];
        const filterVal = [
          "take_no",
          "ctime",
          "name",
          "mobile",
          "express.name",
          "message",
          "dormitory.room_no",
          "full_address",
          "amount",
        ];
        const data = this.formatJson(filterVal);
        console.log(data);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: `第${this.dataPage.currentPage}页订单数据`,
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal) {
      return this.list.map((v) =>
        filterVal.map((j) => {
          if (j.indexOf(".") != -1) {
            let key = j.split(".");
            return v[key[0]][key[1]];
          }
          if (j === "ctime") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
  },
};
</script>
<style scoped>
.filter-container {
  margin-top: 10px;
  display: flex;
  vertical-align: middle;
  align-items: center;
}
.filter-container .filter-item {
  margin: 0;
  margin-left: 10px;
}
</style>